<!DOCTYPE html>
<!-- saved from url=(0038)http://v3.bootcss.com/getting-started/ -->
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>HteOS参考文档</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/patch.css" rel="stylesheet">

<!-- Documentation extras -->
<link href="css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- Favicons -->

<style id="holderjs-style" type="text/css"></style>
</head>
<body>
	<a class="sr-only sr-only-focusable"
		href="http://v3.bootcss.com/getting-started/#content">Skip to main
		content</a>

	<!-- Docs master nav -->
	<header class="navbar navbar-static-top bs-docs-nav" id="top"
		role="banner">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle collapsed" type="button"
					data-toggle="collapse" data-target=".bs-navbar-collapse">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a href="#" class="navbar-brand">HteOS</a>
			</div>
			<nav class="collapse navbar-collapse bs-navbar-collapse"
				role="navigation">
				<ul class="nav navbar-nav">
					<li class="active"><a href="index.html">起步</a></li>
					<!-- <li>
          <a href="http://v3.bootcss.com/css/">全局 CSS 样式</a>
        </li>
        <li>
          <a href="http://v3.bootcss.com/components/">组件</a>
        </li>
        <li>
          <a href="http://v3.bootcss.com/javascript/">JavaScript 插件</a>
        </li>
        <li>
          <a href="http://v3.bootcss.com/customize/">定制</a>
        </li> -->
				</ul>
			</nav>
		</div>
	</header>


	<!-- Docs page layout -->
	<div class="bs-docs-header" id="content">
		<div class="container">
			<h1>起步</h1>
			<p>介绍如何运行编译HteOS。</p>

		</div>
	</div>

	<div class="container bs-docs-container">

		<div class="row">
			<div class="col-md-3">
				<div
					class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix-top"
					role="complementary">
					<ul class="nav bs-docs-sidenav">

						<li class="active"><a href="#env">介绍</a></li>
						<li><a href="#whats-included">项目结构</a></li>
						<li><a href="#grunt">编译发布</a></li>
						<li><a href="#migration">桌面启动分析</a></li>
						</li>
					</ul>
					<a class="back-to-top" href="#top"> 返回顶部 </a>

				</div>
		</div>
			<div class="col-md-9" role="main">
				<div class="bs-docs-section">
					<h1 id="env" class="page-header">介绍</h1>
					<p class="lead">HteOS的是不依赖于后台的前端框架，只需要简单搭建一个WEB服务器既可以运行</p>
					<h3>推荐使用HBuilder HTML5开发工具</h3>
					<p>
						下载HBuilder<a
							href="http://www.dcloud.io/"
							target="_blank">http://www.dcloud.io/</a>
					</p>
					<h3>HteOS采用以下开源软件：</h3>
					<ul>
						<li>RequireJS</li>	
						<li>jQuery</li>		
						<li>Bootstrap</li>		
					</ul>
					<h3>HteOS兼容性</h3>
					<ul>
						<li>IE8+</li>		
						<li>Google Chrome</li>	
						<li>Firefox</li>
						<li>Safari</li>
					</ul>
				</div>

				<div class="bs-docs-section">
					<h1 id="whats-included" class="page-header">项目结构</h1>

					<p class="lead">HteOS在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，</p>
					<div class="highlight">
						<pre>
							<code class="bash">HteOS/
├── build/ 				-> 构建代码目录
├── dev/ 				-> 开发目录
│   ├── api 			        -> 应用程序结构
│   ├── css				-> CSS文件目录
│   ├── fonts			        -> 字体目录
│   ├── html			        -> 静态模块目录
│   ├── images			        -> 图片文件夹目录
│   ├── lib				-> 引用的第三方软件
│   ├── sass			        -> SASS源文件
│   ├── src				-> JS源代码目录
│   └── index.html		        -> HTEOS主界面
├── dist/ 				-> 结构与dev目录一致，编译后的输出目录，代码进行了合并压缩
└── docs/ 				-> 项目文档目录
    ├── api 				-> API文档目录
    ├── db 				-> 数据库文件目录
    └── reference 			-> 参考文档目录
</code>
						</pre>
					</div>

				</div>

				<div class="bs-docs-section">
					<h1 id="grunt" class="page-header">构建</h1>
					<p class="lead">
						HteOS提供构建工具包，使用Grunt进行编译</p>
					<p>
						进行构建之前先下载安装NodeJS、Grunt，执行命令自动合并、压缩源代码，编译SASS文件，生成API文档
							<pre>					
node install					
grunt build								
							</pre>
					</p>
				</div>

				
				<!-- Cross link to new migration page -->

				<div class="bs-docs-section" id="migration">
					<h1 id="support" class="page-header">桌面启动分析</h1>
					<p>
						整个桌面去的启动代码在
						<code>dev/src/Bootstrap.js</code>
					<pre>
(function(factory) {
	if (typeof define === "function" && define.amd) {
	
		// AMD. Register as an anonymous module.
		define(['HteOS/app/AppManager','HteOS/TaskManager','HteOS/Messages',
				'HteOS/Notification','HteOS/Messager', 'HteOS/Masker', 'HteOS/Locker',
				'HteOS/Taskbar','HteOS/Quickbar', 'HteOS/Dockbar',
				'HteOS/Settings','HteOS/Overview','HteOS/Metro','HteOS/API',
				'HteOS/dock/DockManager' ,'HteOS/window/WindowManager',
				'HteOS/page/PageManager','HteOS/menu/MenuManager', ],factory);
	} else {
		// Browser globals
		factory();
	}
}(function() {
	/**
	 * 桌面启动的方法，在页面加载完成后，HteOS会自动调用改方法启动桌面，该方法不需要外部调用。
	 * 在启动的过程中会初始化一系列的组件/组件管理器，会初始化组件：
	 * */
	
	HteOS.Bootstrap = {
		start : function(){
			/**
			 * @event hte-beforestart 
			 * 可以通过监听该事件在启动桌面之前进行某些特殊的操作
			 * 
			 *  	@example
			 * 		$(document).on("hte.beforestart",function(){
			 * 			//do something;
			 * 		});
			 *
			 * */
			HteOS.EventManager.trigger("hteos.beforestart");
			$(document).trigger("hteos.beforestart");
			
			window.setTimeout(function() {
						window.scroll(0, 0);
					}, 500);
		
			//添加IE8的特殊CSS标示
			if (HteOS.UA.isIE8) {
				$("body").addClass("hte-ie8");
			}
			
			// 启动工具提示组件
			if (HteOS.UA.advance && HteOS.UA.Mobile !== true) {
				$(document.body).tooltip({
					selector : "[data-toggle=tooltip]",
					container : "body"
				});
			}
			//HteOS.UA.Mobile = true;
			if(HteOS.UA.Mobile !== true){
				// 初始化窗口管理器
				HteOS.window.WindowManager.init();
		
				// 初始化任务栏
				HteOS.Taskbar.init();
				
				// 初始化侧边栏管理器
				HteOS.dock.DockManager.init();
				
				// 初始化菜单管理器
				HteOS.menu.MenuManager.init();
			
			}else{
				//底部停靠栏
				HteOS.Dockbar.init();
				
				//页面管理器
				HteOS.page.PageManager.init();
			}
	
			//初始化任务管理器
			HteOS.TaskManager.init();
	
			// 初始化通知组件
			HteOS.Notification.init();
	
			// 初始化个性化设置组件
			HteOS.Settings.init(HteOS.User.wallpaper);
	
			//初始化快速启动栏
			HteOS.Quickbar.init();
			
			//初始化Metro桌面
			HteOS.Metro.init();
			
			// 初始化应用管理器
			HteOS.app.AppManager.init();
			
			/**
			 * @event hte-afterstart 
			 * 可以通过监听该事件在启动桌面之前进行某些特殊的操作
			 * 
			 *  	@example
			 * 		$(document).on("hte.afterstart",function(){
			 * 			//do something;
			 * 		});
			 *
			 * */
			HteOS.EventManager.trigger("hteos.afterstart");
			$(document).trigger("hteos.afterstart");
		}
	}
	return HteOS.Bootstrap;
}));
							
						</pre>
					</p>
					<p>
						在这段代码中，初始化了一系列的组件。获取应用列表并展示在桌面上的方法是
						<code>HteOS.app.AppManager.init();</code>
						，下面来看这段代码：
					</p>
					<p>
					<pre>
/**
		 * 初始化应用管理器，在这个方法中首先监听所有跟后台发生交互的事件，用于在触犯事件之后与服务器进行通讯，在这个方法监听了以下事件：
		 * - hte.tile.move 用户拖拽后磁贴后将用户改变的布局保存到数据库中
		 * - hte.metro.hook 用户将磁贴拖拽到新的分组中，管理器向服务器发送创建新组的请求，并将新创建的分组信息返回
		 * - hte.group.destroy 用户将磁贴中拖出时，如果该分组中没有任何应用，系统将会自动的将改分组销毁，在触发该事件时管理器向服务器发送删除分组请求，保证前后台数据的一致性
		 */
		init: function() {
			$(".hte-preloader-text").text("正在加载应用...");

			// 监听磁贴排序事件
			HteOS.EventManager.on("hte.tile.move", this.move,this);
			
			//监听拖动创建新分组的事件
			//HteOS.EventManager.on("hte.metro.hook",this.hook,this);
			
			//监听分组销毁事件
			HteOS.EventManager.on("hte.group.destroy",this.destroyGroup,this);
			
			HteOS.EventManager.on("hte.group.sort",this.sortGroup,this);
			
			HteOS.EventManager.on("hte.group.rename",this.renameGroup,this);
			
			HteOS.EventManager.on("hte.group.apps.change",this.sort,this);

			HteOS.EventManager.on("hte.app.resize",this.resize,this);
			//加载应用
			this.load();
		},
		
							
						</pre>
					</p>
					<p>
						在这段代码中主要是进行一些事件的注册以及监听，最主要的部分是
						<code>this.load()</code>
						，
						<code>load</code>
						方法中，程序向后台获取应用列表。
					</p>
					<p>
					<pre>
/**
		 * @private
		 * 获取当前用户安装的应用，如果没有登录则返回全部默认应用
		 * 获取应用列表的URL在HteOS.API.APP_LIST中定义了，如果需要重写改内容。可以在监听hte-beforestart事件，重写改URL
		 * 在获取应用列表之后，管理器会将所有的应用实例化并存储起来，作为整个桌面的数据源，并触发hte.app.load事件
		 */
		load: function() {
			var me = this;
			
			$.getJSON(HteOS.API.APP_LIST, function(data) {
				
				var groups= data.groups
				//对分组进行排序
				groups.sort(function(a,b){
					if(a.index > b.index){
						return 1;
					}
					return -1;
				});
				
				//创建分组
				for(var i = 0; i < groups.length; i++){
					me.createGroup(groups[i]);
				}
				
				var apps = data.apps;
				//创建应用
				for (var i = 0; i < apps.length; i++) {
					me.createApp(apps[i]);
				}
				
				/**
				 * 所有应用加载完毕并且全部实例化
				 * @event hte-app-load
				 * */
				HteOS.EventManager.trigger("hte.apps.instantiated");
			});
		},
		
							
						</pre>
					</p>
					<p>
						在
						<code>load</code>
						方法中，向后台获取数据，后去数据之后将创建应用实例，并启动桌面、快速启动栏、应用管理等组件，这样桌面启动完成。
					</p>
				</div>

			</div>
		</div>
	</div>
	<!-- Footer ================================================== -->
	<footer class="bs-docs-footer" role="contentinfo">
		<div class="container">


			<p>&copy; HteOS_Team 版权 本文档最终解释权归HteOS所有</p>
			<p>该文档仅对已授权用户负责，未授权用户不予支持</p>
			<p></p>
			<ul class="bs-docs-footer-links muted">
				<li>当前版本： v2.0.1</li>
				<li>·</li>
				<li><a href="http://www.hteos.com">HteOS网站</a></li>
				<li>·</li>
				<li><a href="http://demo.hteos.com">演示站点</a></li>
				<li>·</li>
				<li><a href="http://blog.hteos.com/">官方博客</a></li>
				<li>·</li>
				<li><a href="http://www.hteos.com/about.jsp">关于</a></li>
				<li>·</li>
			</ul>
		</div>
	</footer>

	<!-- Bootstrap core JavaScript
================================================== -->
	<!-- Placed at the end of the document so the pages load faster -->
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/docs.min.js"></script>
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
	<script src="js/ie10-viewport-bug-workaround.js"></script>
	<!-- Analytics
================================================== -->
	<script src="js/h.js" type="text/javascript"></script>

</body>
</html>